<template>
<div id="home">

    <n-card content-style="padding: 5" style="min-width: 800px;">
      <!--      todo 公司入驻 -->
      <a href="/bindCompany" style="width: 50%;color: #321f46;margin:0 0 0 2%;text-decoration:none; position: fixed;"  round><el-icon><Promotion /></el-icon>
        公司入驻</a>
      <n-h2>登录/注册</n-h2>
      <p style="font-family: center;margin:0 0 0 40%;color: #666666;">账号首次通过验证即注册</p>
<!--      账号登陆注册-->
        <n-tabs type="segment" animated v-if="loginMethod" style="width: 80%!important;margin: 0 auto!important;" lazy-load default-value="chap2">
          <n-tab-pane name="chap1" tab="我是招聘者" style="margin-top: 3%;" @click="userLogin.identityId = '20'">
            <img src="../../assets/img/login/ZPZ.svg" style="width: 35%;margin-top: 8%" >
<!--            表单-->
            <a-form  :style="{width:'65%'}"style="float: right;" auto-label-width :size="'large'">
              <a-form-item style="margin-bottom: 10%;margin-top: 10%">
                <a-input placeholder="请输入您的账号"   v-model="userLogin.username" @change="askuserName"  />
                <a-alert v-if="userLogin.username!=''&&userLogin.usernameIs==true" type="success" style="width: 180px;">账号存在</a-alert>
                <a-alert v-if="userLogin.username!=''&&userLogin.usernameIs==false" type="info" style="width: 180px;">账号不存在</a-alert>
              </a-form-item>
              <a-form-item >
                <a-input
                    type="password"
                    show-password-on="mousedown"
                    :maxlength="24"
                    v-model="userLogin.password"
                    placeholder="请输入您的密码"/>
              </a-form-item>

              <a-form-item>
                <a-checkbox v-model="checkIs">

                </a-checkbox>                <a-link @click="dialogFormVisible = true" >我已阅读并同意相关协议</a-link>
              </a-form-item>

              <a-form-item>
                <a-button class="baa" html-type="submit" style="color:#ffffff;" shape="round" @click="loginReg()">登录/注册</a-button>
              </a-form-item>
            </a-form>

          </n-tab-pane>
          <n-tab-pane name="chap2" tab="我要找工作" style="margin-top: 3%" @click="userLogin.identityId = '10'">
            <img src="../../assets/img/login/ZGZ.svg" style="width: 35%;margin-top: 8%" >
<!--            表单-->
            <a-form  :style="{width:'65%'}"style="float: right;" auto-label-width :size="'large'">
              <a-form-item style="margin-bottom: 10%;margin-top: 10%">
                <a-input placeholder="请输入您的账号" v-model="userLogin.username" @change="askuserName" />
                <a-alert v-if="userLogin.username!=''&&userLogin.usernameIs==true" type="success" style="width: 180px;">账号存在</a-alert>
                <a-alert v-if="userLogin.username!=''&&userLogin.usernameIs==false" type="info" style="width: 180px;">账号不存在</a-alert>
              </a-form-item>
              <a-form-item>
                <a-input
                    type="password"
                    show-password-on="mousedown"
                    :maxlength="24"
                    v-model="userLogin.password"
                    placeholder="请输入您的密码"/>
              </a-form-item>
              <a-form-item>
                <a-checkbox v-model="checkIs">

                </a-checkbox>                  <a-link @click="dialogFormVisible = true" >我已阅读并同意相关协议</a-link>
              </a-form-item>
              <a-form-item>
                <a-button class="baa" html-type="submit" style="color:#ffffff;" shape="round" @click="loginReg()">登录/注册</a-button>
              </a-form-item>
            </a-form>
          </n-tab-pane>
        </n-tabs>



<!--      手机验证码登陆注册-->
        <n-tabs type="segment" animated v-else style="width: 80%!important;margin: 0 auto!important;" default-value="chap2">
        <n-tab-pane name="chap1" tab="我是招聘者" style="margin-top: 3%" @click="userLogin.identityId = '10'">
          <img src="../../assets/img/login/ZPZ.svg" style="width: 35%;margin-top: 8%" >
          <!--            表单-->
          <a-form  :style="{width:'65%'}"style="float: right;" auto-label-width :size="'large'">
            <a-form-item style="margin-bottom: 10%;margin-top: 10%">
              <a-input placeholder="请输入您的手机号" v-model="userLogin.phone" @change="askphone" />
              <a-alert v-if="userLogin.phone!=''&&userLogin.phoneIs==true&&userLogin.phone.length==11" type="success" style="width: 200px;">手机号已注册</a-alert>
              <a-alert v-if="userLogin.phone!=''&&userLogin.phoneIs==false&&userLogin.phone.length!=11" type="warning" style="width: 200px;">手机号不正确</a-alert>
              <a-alert v-if="userLogin.phone!=''&&userLogin.phoneIs==false&&userLogin.phone.length==11" type="info" style="width: 200px;">手机号未注册</a-alert>
            </a-form-item>
<!--            <a-form-item>-->
<!--              <n-input-group>-->
<!--                <n-input placeholder="验证码" :style="{ width: '50%' }"  v-model="userLogin.code"/>-->
<!--                <n-button type="primary":style="{ width: '50%'}" @click="sendcode">-->
<!--                  发送验证码-->
<!--                </n-button>-->
<!--              </n-input-group>-->
<!--            </a-form-item>-->
              <a-form-item
                  field="code"
                  :rules="[
        {required:true,message:'需要验证码'},
        {minLength:7, message:'验证码不完整'},
        { match: /^\d+$/, message: '必须是数字' },
      ]"
              >
                <a-verification-code  style="width: 45%" @finish="onFinish" v-model="userLogin.code"/>
                <a-button style="width: 25%;margin-left: 30%" type='primary'  htmlType='submit' @click="sendcode">发送验证码</a-button>
              </a-form-item>



            <a-form-item>
              <a-checkbox v-model="checkIs">

              </a-checkbox>
              <a-link @click="dialogFormVisible = true" >我已阅读并同意相关协议</a-link>
            </a-form-item>
            <a-form-item>
              <a-button class="baa" html-type="submit" style="color:#ffffff;" shape="round" @click="loginReg()">登录/注册</a-button>
            </a-form-item>
          </a-form>

        </n-tab-pane>
        <n-tab-pane name="chap2" tab="我要找工作" style="margin-top: 3%" @click="userLogin.identityId = '10'">
          <img src="../../assets/img/login/ZGZ.svg" style="width: 35%;margin-top: 8%" >
          <!--            表单-->
          <a-form  :style="{width:'65%'}"style="float: right;" auto-label-width :size="'large'">
            <a-form-item style="margin-bottom: 10%;margin-top: 10%">
              <a-input placeholder="请输入您的手机号" v-model="userLogin.phone" @change="askphone"/>
              <a-alert v-if="userLogin.phone!=''&&userLogin.phoneIs==true&&userLogin.phone.length==11" type="success" style="width: 200px;">手机号已注册</a-alert>
              <a-alert v-if="userLogin.phone!=''&&userLogin.phoneIs==false&&userLogin.phone.length!=11" type="warning" style="width: 200px;">手机号不正确</a-alert>
              <a-alert v-if="userLogin.phone!=''&&userLogin.phoneIs==false&&userLogin.phone.length==11" type="info" style="width: 200px;">手机号未注册</a-alert>
            </a-form-item>
            <a-form-item
                field="code"

                :rules="[
        {required:true,message:'需要验证码'},
        {minLength:7, message:'验证码不完整'},
        { match: /^\d+$/, message: '必须是数字' },
      ]"
            >
              <a-verification-code  style="width: 45%" @finish="onFinish" v-model="userLogin.code"/>
              <a-button style="width: 25%;margin-left: 30%" type='primary'  htmlType='submit' @click="sendcode">发送验证码</a-button>
            </a-form-item>
            <a-form-item>
              <a-checkbox v-model="checkIs" >
              </a-checkbox>
              <a-link @click="dialogFormVisible = true" >我已阅读并同意相关协议</a-link>
            </a-form-item>
            <a-form-item>
              <a-button class="baa" html-type="submit" style="color:#ffffff;" shape="round"  @click="loginReg()">登录/注册</a-button>
            </a-form-item>
          </a-form>
        </n-tab-pane>
      </n-tabs>
<!--分割线-->
      <el-divider />
      <div>
      <a style="width: 50%;color: #321f46;margin:0 0 0 40%;text-decoration:none; position: fixed;" @click="changeYM()" round><el-icon><Promotion /></el-icon>
        {{ info }}</a>
      </div>

      <template #footer >
        <div style="margin: 0 auto;text-align: center;" >
        职来运转<el-divider direction="vertical" />
        客服电话 15752104407 <el-divider direction="vertical" />
          工作时间：8:00-22:00
        </div>
      </template>
    </n-card>
  <!--     弹窗,可关闭-->
  <!-- 使用v-if来确保在内容加载之前不显示对话框 -->
  <el-dialog v-model="dialogFormVisible" title="用户协议" width="500">
    <div style="margin-bottom: 20px;">
      <div style="font-size: 20px;font-weight: bold;">
        职来运营协议
      </div>
      <div style="font-size: 16px;">
        <div style="margin-bottom: 20px;">
          <div style="font-size: 20px;font-weight: bold;">
            一、服务条款
          </div>
          <div>
            1.1.职来平台为用户提供招聘信息浏览、职位申请、面试邀请、面试评价等功能。
            1.2.职来平台提供的服务仅供个人使用，不得用于非法用途，不得侵犯他人合法权益。
            1.3.职来平台不对用户上传的招聘信息、职位申请、面试邀请、面试评价等数据承担任何责任。
          </div>
          <div style="font-size: 20px;font-weight: bold;">
            二、隐私政策
          </div>
          <div>
            2.1.职来平台将严格保密用户上传的招聘信息、职位申请、面试邀请、面试评价等数据。
          </div>
          <div style="font-size: 20px;font-weight: bold;">
            三、免责声明
          </div>
          <div>
            3.1.职来平台不对用户上传的招聘信息、职位申请、面试邀请、面试评价等数据承担任何责任。
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div>
        <a-button type="primary" class="button2" style="left: -200px" @click="dialogFormVisible = false">取 消</a-button>
        <a-button type="primary" class="button2" @click="(dialogFormVisible = false), (checkIs = true)">
          阅读并同意
        </a-button>
      </div>
    </template>
  </el-dialog>


</div>
</template>

<script >
import {ElMessage} from "element-plus";
import axios from "axios";
import router from "@/router";
import qs from "qs";
import { reactive, ref } from 'vue'

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})



export default {
  setup() {

    const userLogin = ref({
      username: '',
      password: '',
      phone:'',
      code:'',
      identityId:'',
      phoneIs:false,
      usernameIs:false
    });

    //查询用户的表单
    const userquery = ref({
      username:'',
      phone:'',
      identityId:''
    })
    //协议弹窗
    const showxieyiDialog = ref(false);
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'

    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    })


    const isreal=ref({
      usernameis:true,
      phoneis:false
    });
    const info = ref("手机验证码登录");
    const checkIs = ref(false);//协议
    const loginMethod=ref(true);
    const changeYM = ()=>{
      if (info.value=='账号密码登录'){
        info.value='手机验证码登录'
        loginMethod.value=true
      }else {
        info.value='账号密码登录'
        loginMethod.value=false
      }
    }
    const loginReg = ()=>{
      if(userLogin.value.usernameIs==true||userLogin.value.phoneIs==true){
        console.log("登录")
        login();
      }else {
        // 注册
        console.log("注册")
        reg();
      }
    }
    const reg = ()=>{
      console.log("注册")
      if(userLogin.value.identityId=='20'){
        ElMessage.error("hr请在公司管理页注册");
        return
      }
      if(loginMethod.value){
        console.log("账号密码注册")
      if (userLogin.value.username.length>0&&userLogin.value.password.length>0){
        console.log("账号密码注册")
        let data = qs.stringify({
          username:userLogin.value.username,
          password:userLogin.value.password,
          identityId:userLogin.value.identityId
        });
        console.log(data)
        axios.post( BASE_URL + '/v1/user/reg/', data).then(response => {
          if (response.data.code == 2000) {
            ElMessage.success(response.data.msg);
            console.log('看我看我！！'+response.data.data.userId);
              localStorage.setItem("user",JSON.stringify(response.data.data))
            router.push('/');
          }else {
            ElMessage.error(response.data.msg);
          }
        })
      }}else {
        console.log("手机验证码注册")
        if (userLogin.value.phone.length == 11 && userLogin.value.code.length == 6) {
          console.log("手机验证码登录")
          let data = qs.stringify({
            phone: userLogin.value.phone,
            code: userLogin.value.code,
            identityId:userLogin.value.identityId
          });
          console.log(data);
          axios.post(BASE_URL + '/v1/user/reg/', data).then(response => {
            if (response.data.code == 2000) {
              ElMessage.success(response.data.msg);
              console.log('看我看我！！'+response.data.data.userId);
              localStorage.setItem("user",JSON.stringify(response.data.data))
              router.push('/');
            } else {
              ElMessage.error(response.data.msg);
            }
          })
        } else {
          ElMessage.error('请输入账号密码');
        }
      }
    }

    const login = () =>{
          if (checkIs.value) {
            // 登录成功 跳转到首页
            if (loginMethod.value) {
              //用户密码登录
              console.log("用户密码登录")
              if (userLogin.value.username.length > 0 && userLogin.value.password.length > 0) {
                let data = qs.stringify({
                  username: userLogin.value.username,
                  password: userLogin.value.password,
                  identityId: userLogin.value.identityId
                });
                //用户密码登录
                console.log(data);
                axios.post(BASE_URL + '/v1/user/login/', data).then(response => {
                  if (response.data.code == 2000) {
                    ElMessage.success(response.data.msg);
                    console.log('看我看我！！' + response.data.data.userId);
                    localStorage.setItem("user", JSON.stringify(response.data.data))
                    localStorage.setItem("satoken", response.data.data.saTokenInfo.tokenValue)
                    // console.log("=========================================")
                    // console.log(localStorage.getItem("user"));
                    // console.log(localStorage.getItem("satoken"));
                    // console.log("=========================================")
                    // console.log(response.data.data);
                    router.push('/');
                  } else {
                    ElMessage.error(response.data.msg);
                  }
                })
              } else {
                ElMessage.error('请输入账号密码');
              }
            } else {
              //手机验证码登录
              if (userLogin.value.phone.length == 11 && userLogin.value.code.length == 6) {
                console.log("手机验证码登录")
                let data = qs.stringify({
                  phone: userLogin.value.phone,
                  code: userLogin.value.code
                  // identityId: userLogin.value.identityId
                });
                //手机验证码登录
                console.log(data);
                axios.post(BASE_URL + '/v1/user/phoneLogin', data).then(response => {
                  if (response.data.code == 2000) {
                    ElMessage.success(response.data.msg);
                    localStorage.setItem("user", JSON.stringify(response.data.data))
                    localStorage.setItem("satoken", response.data.data.saTokenInfo.tokenValue)
                    router.push('/');
                  }
                })
              }
              if (userLogin.value.phone.length != 11) {
                ElMessage.error('请输入正确的手机号');
              } else if (userLogin.value.code.length != 6) {
                ElMessage.error('请输入正确的验证码');
              }
            }
          }else {
            ElMessage.error("请先阅读并同意用户协议");
          }
    }
    const sendcode = ()=>{
      console.log("====================开始发送短信")
      axios.post(BASE_URL + '/v1/user/code?phone=' + userLogin.value.phone).then(response => {
        if (response.data.code == 2000) {
          ElMessage.success("短信发送成功");
        } else {
          ElMessage.error(response.data.msg);
        }
      })
    }

   const agreeAndClose=() =>{
      // 实现同意操作的逻辑，例如记录用户同意的行为等
      // 然后关闭对话框
      showxieyiDialog.value = false;
    }
    const askuserName = ()=>{
      //初始化userquery
      if (userLogin.value.username!=''){
        // let data = qs.stringify(userLogin.value.username);
        let data = qs.stringify({
          username:userLogin.value.username,
          identityId:userLogin.value.identityId
        });
        console.log(data);
        //清空phone
        userLogin.value.phone='';
        userLogin.value.code='';
        axios.post( BASE_URL + '/v1/user/select/',data).then(response => {
          console.log(response.data.code);
          if (response.data.code == 2000) {
            console.log(response.data.data);
            userLogin.value.usernameIs=true;
          }else {
            userLogin.value.usernameIs=false;
          }
        })
      }
    }
    const askphone = ()=>{
      if (userLogin.value.phone.length==11){
        let data = qs.stringify({
          phone:userLogin.value.phone,
          identityId:userLogin.value.identityId
        });
        //debug
        console.log(data);

        userLogin.value.username='';
        userLogin.value.password='';
        axios.post( BASE_URL + '/v1/user/select/', data).then(response => {
          if (response.data.code == 2000) {
            userLogin.value.phoneIs=true;
          }else {
            userLogin.value.phoneIs=false;
          }
        })
      }
    }

    return {
      userLogin,
      info,
      checkIs,
      isreal,
      loginMethod,
      changeYM,
      login,
      sendcode,
      askuserName,
      dialogFormVisible,
      askphone,
      dialogVisible: false, // 对话框的可见性
      showxieyiDialog: false, // 控制对话框显示的变量
      agreementContent: '', // 协议内容,
      agreeAndClose,
      loginReg,

    }
  },
}


</script>


<style scoped>
#home{
  width: 100%;
  min-height: 100vh;
  font-size: 3%;
  background: url('~@/assets/img/login/DLBJ.jpg')center ;
  background-size: 100% 100%;
}
.n-card{
  width: 53%;
  height: 600px;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  border-radius:6%;
}
.n-h2{
  color: #6c4295;
  width: 100%;
  height: 10%;
  margin: 0 0 0 40% ;
  font-size: 35px;
  font-weight: bold;
  font-family: Microsoft YaHei;

}
.button2{
  width:90px;
  height: 40px;
  margin: 20px;
  border-radius: 9%;
  text-align: center;
}
button{
  background: linear-gradient(90deg, rgb(108, 66, 149), rgb(108, 66, 149));/*渐变颜色*/
  font-family: Microsoft YaHei;
  width: 60%;
  height: 50px;
  margin: 0 auto;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    box-shadow: 0 0 5px rgb(108, 66, 149); /* 霓虹边框效果，可以根据需求调整颜色和模糊度 */
    border-radius: 20px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
.baa:hover{
  background: linear-gradient(45deg, #6c4295, #b78ae3);
  transform: scale(1.2); /* （120% 缩放按钮动态*/
}

</style>